<template>
  <div :id="id" class="left-field-list-container item-ignore-click">
    <!--    <el-tree :data="fieldTree"/>-->

    <el-collapse style="padding-left: 20px">
      <el-collapse-item title="主表单" name="1">
        <FList title-name="showName" :itemStyle="itemStyle"
               :selectedKey="editingFieldDefinition?editingFieldDefinition.id:undefined" @select="selectField"
               :dataSource="formDefinition.fields" :searchEnable="false">
          <template v-slot:default="{item}">
            <div data-role="field" class="field-item-wrapper" draggable="true"
                 :data-component="item.component" :data-field-id="item.id">
              <div style="flex: 1">{{ item.showName }}</div>
              <el-button class="field-setting-button"
                         v-context="[fieldContext, item]"
                         size="small" :icon="Setting" circle/>
            </div>
          </template>
        </FList>
      </el-collapse-item>

      <el-collapse-item v-for="subForm in formDefinition.subForms" :key="subForm.id"
                        :title="subForm.showName" :name="subForm.id">
        <template #title>
          <div data-role="subFormField" draggable="true" data-component="SubTable"
               :data-sub-form-id="subForm.id" class="left-field-list-subform-title-wrapper">
            <div class="left-field-list-subform-title">
              {{ subForm.showName }}
            </div>
            <el-button v-context="[subFormContext, subForm]"
                       style="margin-right: 10px" size="small" :icon="Setting" circle/>
          </div>
        </template>

        <FList title-name="showName" :itemStyle="itemStyle"
               :selectedKey="editingFieldDefinition ? editingFieldDefinition.id : undefined"
               @select="selectField" :dataSource="subForm.fields" :searchEnable="false">
          <template v-slot:default="{item}">
            <div data-role="field" class="field-item-wrapper" draggable="true" :key="item.id"
                 :data-component="item.component" :data-field-id="item.id">
              <div style="flex: 1">{{ item.showName }}</div>
              <el-button class="field-setting-button"
                         v-context="[subFormFieldContext, item]"
                         size="small" :icon="Setting" circle/>
            </div>
          </template>
        </FList>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {guid, isEmpty} from '@/utils/CommonUtils';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import FList from '@/components/FList/index.vue';
import {Setting} from '@element-plus/icons-vue';
import {markRaw} from 'vue';
import {ElMessageBox} from 'element-plus';

export default {
  name: 'FieldList',
  props: {
    formDefinition: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(DefaultFormDefinition))
    },
    editingFieldDefinition: {
      type: Object,
      default: () => undefined
    },
  },
  components: {FList, Setting},
  data() {
    return {
      fieldContext: {
        width: 175,
        context: [
          {title: '上移', id: 'moveUp'},
          {title: '下移', id: 'moveDown'},
          {title: '删除', id: 'delete'},
        ],
        click: this.fieldContextClick,
        close: () => null,
      },
      subFormContext: {
        width: 175,
        context: [
          {title: '上移', id: 'MoveUp'},
          {title: '下移', id: 'MoveDown'},
          {title: '删除', id: 'Delete'},
        ],
        click: this.subFormContextClick,
        close: () => null,
      },
      subFormFieldContext: {
        width: 175,
        context: [
          {title: '上移', id: 'MoveUp'},
          {title: '下移', id: 'MoveDown'},
          {title: '删除', id: 'Delete'},
        ],
        click: this.subFormFieldContextClick,
        close: () => null,
      },
      Setting: markRaw(Setting),
      itemStyle: {
        padding: 0,
      },
      selectedKey: undefined,
      fieldTree: [],
      id: guid()
    };
  },
  methods: {
    selectField(fieldConfig) {
      this.selectedKey = fieldConfig.id;
      this.$emit('selectField', fieldConfig);
    },
    setSelect(fieldConfig) {
      this.selectedKey = fieldConfig.id;
    },
    fieldConfigChange(fieldConfig) {
      this.refreshFields();
    },
    refreshFields() {
      this.id = guid();
    },
    deleteField(field) {
      ElMessageBox.confirm('删除后不可恢复, 确定删除字段吗', '确定删除?', {
        draggable: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$emit('removeField', field.id);
      }).catch(() => {
      });
    },
    fieldContextClick(action, field) {
      this.fieldContext.close();
      this[`${action.id}Field`](field);
    },
    subFormDelete(subform) {
      ElMessageBox.confirm('删除后不可恢复, 确定删除字段吗', '确定删除?', {
        draggable: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$emit('removeSubForm', subform.id);
      }).catch(() => {
      });
    },
    subFormFieldDelete(subformField) {
      let subForms = this.formDefinition.subForms;
      if (isEmpty(subForms)) subForms = [];
      for (let i = 0; i < subForms.length; i++) {
        let subForm = subForms[i];
        if (isEmpty(subForm)) subForm = {};
        let fields = subForm.fields;
        if (isEmpty(fields)) subForm = [];
        let index = fields.findIndex(f => f.id === subformField.id);
        if (index !== -1) {
          fields.splice(index, 1);
        }
      }
      this.$emit('removeField', subformField.id);
    },
    subFormFieldContextClick(action, subformField) {
      ElMessageBox.confirm('删除后不可恢复, 确定删除吗? ', '确定删除? ', {
        draggable: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.subFormFieldContext.close();
        this[`subFormField${action.id}`](subformField);
      }).catch(() => {

      });
    },
    subFormContextClick(action, subform) {
      this.subFormContext.close();
      this[`subForm${action.id}`](subform);
    },
  }
};
</script>

<style scoped>
.left-field-list-container {
}

.field-item-wrapper {
  display: flex;
  height: 100%;
  align-items: center;
}

.field-setting-button {
  margin-right: 10px;
}

.left-field-list-subform-title-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.left-field-list-subform-title {
  flex: 1;
}
</style>
